<!DOCTYPE html>
<html class="x-admin-sm">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<style type="text/css">
    .layui-table-grid-down {
        display: none;
    }
</style>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>订单管理</a>
                <a>订单列表</a>
                <a>
                    <cite>订单详情</cite>
                </a>

            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-row">
                        <div class="layui-col-xs3 layui-text">
                            <div class="grid-demo grid-demo-bg1 "> 取餐方式:<span id="span1"></span></div>
                        </div>
                        <div class="layui-col-xs3 layui-text">
                            <div class="grid-demo ">下单用户:<span id="span2"></span></div>
                        </div>
                        <div class="layui-col-xs3 layui-text">
                            <div class="grid-demo grid-demo-bg1">联系方式:<span id="span3">13845061658</span></div>
                        </div>
                        <div class="layui-col-xs3 layui-text">
                            <div class="grid-demo grid-demo-bg1">订单总价:<span id="span4">已送达</span></div>
                        </div>
                    </div>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-hide" id="test" lay-filter="demo"></table>
                </div>

            </div>
        </div>
    </div>
    <input type="hidden" id="mid" th:value="${#request.getAttribute('oid')}">
</div>
</body>
<script>
    var mid = $('#mid').val();
    layui.use([ 'form', 'table'],
        function () {
            var
                table = layui.table;
            table.render({
                elem: '#test'
                , url: '/orderDetail/info?orderId=' + mid //数据接口
                , page: false //开启分页
                , cols: [
                    [ //表头
                        {field: 'detailId', title: '详情id', width: 150, align: 'center'},
                        {field: 'name', title: '商品名称', width: 110, align: 'center'},
                        {field: 'price', title: '商品单价', width: 150, align: 'center',templet: function (res) {
                            return '￥'+res.price}
                        }
                        , {field: 'number', title: '商品数量', width: 90, align: 'center'}
                        , {field: 'postscript', title: '商品备注', width: 165, align: 'center',templet: function (res) {
                            if (res.postscript === null){
                                return '<div style="color: dodgerblue;font-weight:bold">正常制作</div>';
                            }}}
                        , {field: 'createdTime', title: '完成时间', sort: true, width: 188, align: 'center'}
                    ]
                ]
                , parseData: function (res) { //res 即为原始返回的数据
                    var sum=0;
                    $.each(res.data.data,function (item,res) {
                        sum = sum + res.price * res.number
                        $("#span4").text('￥'+sum)
                    })
                    if (res.data.data[0].orderType === 1){
                        $("#span1").text("到店自取")
                    }else{
                        $("#span1").text("店家配送")
                    }
                    $("#span2").text(res.data.data[0].userId)
                    $.ajax({
                        url: '/user/oneUser?userid='+res.data.data[0].userId,
                        type: 'get',
                        dataType: 'json',
                        success: res=>{
                            $("#span3").text(res.data.mobilePhone)
                        }
                    })
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        // "count": res.data.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    }
                }
            });

        });

</script>
</html>